﻿<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" charset="utf-8" >
<style>

.selected {
  fill: maroon;
}


.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}



</style>

</head>
<body>
<svg id=chart_one>
    <g>
    </g>
</svg>
<input id="range-ctlr" type="range" value="0" min="0" max="100" onchange="showValue(this.value)"/>
<br/>
<span id="range-view">filter: null</span>
<br/>
<span id="filter-view">filtered-bar-height: null</span>
<script src="js/d3.v3.js" charset="utf-8" type="text/javascript"></script>
<script src="js/crossfilter.js" type="text/javascript"></script>
<script>
var data = [{"time": 2004-01-04, "value": 64},
{"time": 2004-01-11, "value": 65},
{"time": 2004-01-18, "value": 69},
{"time": 2004-01-25, "value": 70},
{"time": 2004-02-01, "value": 70},
{"time": 2004-02-08, "value": 71},
{"time": 2004-02-15, "value": 76},
{"time": 2004-02-22, "value": 73},
{"time": 2004-02-29, "value": 72},
{"time": 2004-03-07, "value": 62},
{"time": 2004-03-14, "value": 67},
{"time": 2004-03-21, "value": 67}];

document.getElementById("range-ctlr").max = data.length;

var cf = crossfilter(data);
var filter;

var showValue = function(value) {
    filter = value;
    document.getElementById("range-view").innerHTML = "filter:" + filter;
    render();
}


var ymdFormat = d3.time.format("%Y-%m-%d");

var width = 420,
    height = 20 * data.length;

var chart = d3.select("#chart_one")
    .style("stroke", "white")
    .style("fill", "steelblue")
    .attr("class", "chart")
    .attr("width", width)
    .attr("height", height);
    
var w = 20,
    h = 80,
    brush_ht = 20;

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, w]);

var y = d3.scale.linear()
    .domain([0, 100])
    .rangeRound([0, h]);

var x_axis = d3.scale.linear()
    .range([0, w * data.length]);

var y_axis = d3.random.normal(height / 2, height / 8);

var svg = d3.select("body").select("svg");

var bars = svg.select("g")
    .selectAll("rect")
    .data(data);

bars.enter().append("rect");

var brush = d3.svg.brush().x(x_axis)
.on("brushstart", brushstart)
.on("brush", brushmove)
.on("brushend", brushend);

svg.append("g")
.attr("class", "brush")
.call(brush)
.selectAll("rect")
.attr("height", h + 10);


bars.on("click", clickEvent)
    .attr("x", function(d, i) { console.log(x(i) - .5); return x(i) - .5; })
    .attr("y", function(d) { return h - y(d.value) - .5; })
    .attr("width", w)
    .attr("height", function(d) { return y(d.value); });


function brushstart() {
    var svg = d3.select("body").append("svg");
  svg.classed("selecting", true);
}

function brushmove() {
  var s = d3.event.target.extent();
  console.log(s[0] + " " + s[1]);
  s[0] = x_axis(s[0]);
  s[1] = x_axis(s[1]);
  console.log(s[0] + " " + s[1]);
  bars.classed("selected", function(d,i) { 
    var temp_x = x(i) - .5;
    return (s[0] - .5) <= temp_x && (temp_x + w) <= s[1]; });
}

function brushend() {
  svg.classed("selecting", !d3.event.target.empty());
}

function clickEvent(d, i) {
console.log(d);
    var op = prompt("Please enter the value", data[i].value);
    if(!isNaN(parseInt(op,10))){
        data[i].value = parseInt(op, 10);
        render();
    }
};
</script>
 </body>
</html>